import React from 'react';
import PropTypes from 'prop-types';
import './index.scss';
// 幻灯片下面的小图
import ImgList from './img_list/index';
// 图片查看界面
class PicModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imgList: [],
      showImgIndex: 0,
    }
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.prevImg = this.prevImg.bind(this);
    this.nextImg = this.nextImg.bind(this);
  }
  componentDidMount() {
    this.listenKeyUp();
    this.getImgList(this.props.data.content.rendered);
  }
  componentWillUnmount() {
    // 监听键盘退出键
    document.body.removeEventListener('keyup', this.handleKeyUp.bind(this), false)
  }
  // 过滤得到图片url地址列表
  getImgList(content) {
    const imgReg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi // 匹配得到img标签
    const srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配得到src属性
    const imgRes = content.match(imgReg)
    const srcList = []
    for (let i = 0, { length } = imgRes; i < length; i++) {
      const srcRes = imgRes[i].match(srcReg);
      srcList.push(srcRes[1]);
    }
    this.setState({
      imgList: srcList,
      showImgSrc: srcList[0],
    })
  }
  // 下一页
  nextImg() {
    if (this.state.showImgIndex === this.state.imgList.length - 1) { return }
    this.setState({
      showImgIndex: this.state.showImgIndex + 1,
    })
  }
  // 上一页
  prevImg() {
    if (this.state.showImgIndex === 0) { return }
    this.setState({
      showImgIndex: this.state.showImgIndex - 1,
    })
  }
  // 点击缩略图显示大图
  handleItemClick(index) {
    this.setState({
      showImgIndex: index,
    })
  }
  // 键盘事件
  handleKeyUp(event) {
    const code = event.keyCode || event.which;
    if (code === 27) {
      this.props.handleClose()
      document.body.removeEventListener('keyup', this.handleKeyUp)
    } else if (code === 65 || code === 37) {
      // a或者左键头
      this.prevImg();
    } else if (code === 68 || code === 39) {
      // d或者右箭头
      this.nextImg();
    }
  }
  // 键盘事件
  listenKeyUp() {
    document.body.addEventListener('keyup', this.handleKeyUp)
  }
  render() {
    const { imgList } = this.state
    return (
      <div className="model" >
        <span className="close" onClick={this.props.handleClose} />
        {imgList.length ?

          <div className="pic-container">
            <div className="img-show-current">
              {this.state.showImgIndex !== 0 ?
                <span className="prev control-icon" onClick={this.prevImg}>
                  {'<'}
                </span> : ''
              }
              <img src={imgList[this.state.showImgIndex]} alt="ss" />
              {this.state.showImgIndex !== imgList.length - 1 ?
                <span className="next control-icon" onClick={this.nextImg}>
                  {'>'}
                </span> : ''
              }
            </div>
            <ImgList
              imgs={imgList}
              itemWidth={80}
              itemClick={this.handleItemClick}
              viewWidth={800}
              showImgIndex={this.state.showImgIndex}
            />
          </div>
          :
          <div className="loading">
            加载中...
          </div>
        }
      </div>
    )
  }
}
export default PicModel;
PicModel.propTypes = {
  data: PropTypes.objectOf(Object),
  handleClose: PropTypes.func,
}
